<template>
  <ul class="course-list flex-wrap">
    <li
      v-for="(item, index) in courseList"
      class="course-item"
      :key="index"
      @click="goToDetail(item)"
    >
      <div class="course-cover-box">
        <img
          class="course-cover"
          v-lazy="parseResourceUrl(item.cover_url)"
          alt="课程封面"
          :title="item.product_name"
        />
      </div>
      <div class="course-middle-box">
        <el-tooltip
          :content="item.promotion_name || item.product_name"
          effect="dark"
          placement="top-start"
        >
          <strong class="course-title-box text-ess-2">
            <template v-if="item.promotion_name">
              <span
                v-for="(pitem, pindex) in item.promotion_name.split(',')"
                :key="pindex"
                class="course-tip"
              >
                {{ pitem }}
              </span>
            </template>
            {{ item.product_name }}
          </strong>
        </el-tooltip>
        <!-- 如果没配置  则展示默认值 -->
        <div style="height: 107px">
          <!-- 有配置 -->
          <ul
            class="tips-box flex-wrap"
            v-if="item.marketing_config && item.marketing_config.desc"
          >
            <template
              v-for="(configItem, index) in item.marketing_config.desc.split(
                '/n'
              )"
            >
              <li :key="index" v-if="configItem" class="tip flex-center">
                {{ configItem }}
              </li>
            </template>
          </ul>
          <!-- 无配置 -->
          <!-- <ul v-else class="tips-box flex-wrap">
            <li :key="index" v-for="(configItem, index) in defaultConfig.desc.split('\n')" class="tip flex-center">
              {{ configItem }}
            </li>
          </ul> -->
          <!-- 有配置 -->
          <div
            v-if="
              Array.isArray(item.service_package_simple) &&
                item.service_package_simple.length
            "
            class="course-ac-box"
            :class="
              item.marketing_config && item.marketing_config.desc ? 'mt20' : ''
            "
          >
            <div
              class="course-ac-item flex-center-wrap"
              v-for="(citem, cindex) in item.service_package_simple"
              :key="cindex"
            >
              <img
                class="ac-icon-img"
                :src="parseResourceUrl(citem.icon_url)"
              />
              <div class="ac-title text-ess-1" style="width: 205px">
                {{ citem.item_name }}
              </div>
            </div>
          </div>
          <!-- 无配置 -->
          <!-- <div v-else class="course-ac-box">
            <div style="border-radius: 8px; overflow: hidden">
              <div class="course-ac-item flex-wrap">
                <div class="ac-send-icon ac-icon">赠</div>
                <div class="ac-title text-ess-1" style="width: 205px">
                  {{ defaultConfig.market_config }}
                </div>
              </div>
              <div class="course-ac-item flex-wrap">
                <div class="ac-get-icon ac-icon">享</div>
                <div class="ac-title text-ess-1" style="width: 205px">
                  {{ defaultConfig.enjoy_rights }}
                </div>
              </div>
            </div>
          </div> -->
        </div>

        <div>
          <div
            class="flex-wrap flex-justify-between flex-center-wrap course-bottom-box"
          >
            <div class="course-price-box">
              <div class="course-price" v-if="item && item.is_free == 1">
                免费
              </div>
              <div v-else>
                <div class="course-price">
                  {{ item.price || item.product_price | filterPrice }}
                </div>
                <span style="vertical-align: bottom">元</span>
              </div>
            </div>
            <div class="course-pur-count">
              {{ item.statistics || item.product_statistics }}人学过
            </div>
          </div>
          <div class="course-button-box flex-wrap flex-justify-between">
            <el-button
              class="spain-button"
              spain
              round
              @click.stop="gotoKefu(item)"
            >
              咨询客服
            </el-button>
            <el-button
              class="primary-button"
              type="primary"
              round
              @click.stop="goToDetail(item)"
            >
              立即购买
            </el-button>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    courseList: {
      type: Array,
      default: () => []
    },
    mockid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      //默认配置
      defaultConfig: {
        desc: '精品好课\n逐章精讲\n系统学习',
        market_config: '全科在线题库',
        enjoy_rights: '配套资料、7天退换、补差升级'
      },
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  filters: {
    filterPrice(val) {
      if (!val) return 0
      return val / 100
    }
  },
  methods: {
    // 跳转到详情
    goToDetail(item) {
      // 跳转到详情页
      this.zlaBtn = {
        key_name: '立即购买',
        key_content: item.product_name
      }
      if (this.mockid) {
        this.zlaBtn = {
          key_name: `学习中心_立即购买,万人模考_立即购买`,
          key_content: `${item.product_name}_${this.mockid}`
        }
      }
      this.goTo('/course_detail.html', {
        query: { product_id: item.product_id },
        target: '_blank',
        watch: true
      })
    },
    // 跳转到客服
    gotoKefu(item) {
      this.zlaBtn = {
        key_name: '咨询客服',
        key_content: item.product_name
      }
      if (this.mockid) {
        this.zlaBtn = {
          key_name: `学习中心_咨询客服,万人模考_咨询客服`,
          key_content: `${item.product_name}_${this.mockid}`
        }
      }
      this.show53Kefu()
    },
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>
<style scoped>
/* .course-box {
  padding-bottom: 26px;
} */
.course-list {
  flex-wrap: wrap;
}
.course-item {
  margin-top: 20px;
  margin-right: 20px;
  width: 285px;
  background: #ffffff;
  border-radius: 12px;
  cursor: pointer;
}
.course-cover {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  transform: scale(1);
  cursor: pointer;
}
.course-cover:hover {
  transform: scale(1.1);
}
.course-cover-box {
  width: 285px;
  height: 158px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
}
.course-cover[lazy='loading'],
.course-cover[lazy='error'] {
  width: 50px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  transition: none;
}

.course-item:nth-of-type(1),
.course-item:nth-of-type(2),
.course-item:nth-of-type(3),
.course-item:nth-of-type(4) {
  margin-top: 0px;
}
.course-item:nth-of-type(4n) {
  margin-right: 0px;
}
.course-middle-box {
  padding: 15px 20px 20px;
  height: calc(100% - 158px);
}
.course-title-box {
  margin-bottom: 10px;
  line-height: 22px;
  height: 44px;
  color: #383838;
  font-weight: 600;
  cursor: pointer;
}
.course-tip {
  margin-right: 4px;
  background: #fff3eb;
  border-radius: 4px;
  color: #ff8d38;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  padding: 0px 5px;
  line-height: 20px;
}
.tips-box {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  height: 17px;
}
.tip {
  margin-right: 10px;
  line-height: 17px;
}
.tip::before {
  margin-right: 4px;
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #999999;
}
.tip:nth-of-type(4n) {
  margin-right: 0;
}
.mt20 {
  margin-top: 20px;
}
.course-ac-box {
  margin-top: 20px;
  max-height: 70px;
  background-color: #f7f7f7;
  overflow: hidden;
  border-radius: 8px;
}
.course-ac-item {
  padding: 10px;
  background-color: #f7f7f7;
  font-size: 14px;
  font-weight: 400;
  color: #383838;
  line-height: 20px;
}
.course-ac-item:nth-of-type(2) {
  padding-top: 0px;
}
.ac-icon-img {
  margin-right: 4px;
  width: 18px;
  height: 18px;
}
.ac-icon {
  margin-right: 4px;
  width: 18px;
  height: 18px;
  text-align: center;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  color: #ffffff;
  line-height: 18px;
}
.ac-send-icon {
  background: #ff7038;
}
.ac-get-icon {
  background: #ff8d38;
}
.course-bottom-box {
  margin-top: 20px;
}
.course-price-box {
  font-size: 14px;
  font-weight: 600;
  color: #ff5338;
  line-height: 33px;
}
.course-price {
  display: inline-block;

  font-size: 20px;
}
.course-pur-count {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}
.course-button-box {
  margin-top: 20px;
}
.course-list /deep/ .el-button.is-round {
  border-radius: 17px;
}
.spain-button {
  padding: 0;
  width: 116px;
  height: 36px;
  line-height: 30px;
  font-weight: normal;
  background: #f2f2f2;
  border: none;
  color: #666666;
}
/* .spain-button:hover{
  background: #f2f2f2;
  border: none;
  color: #FFFFFF;
} */
.primary-button {
  width: 116px;
  height: 36px;
  padding: 0;
  background: linear-gradient(90deg, #ff8d38 0%, #ff7038 100%);
  border: none;
  font-weight: normal;
}
.primary-button:hover {
  background: linear-gradient(90deg, #ff8d38 0%, #ff7038 100%);
}
</style>
